<template>
	<view>
		<u-cell-group>
			<u-cell v-if="conversational.conversationalType === 'C2C'" clickable :title="conversational.userPortrait.userNick" :value="lastMessageTime">
				<view slot="icon" class="icon-view">
					<view class="icon-view-badge">
						<u-badge class="icon-badge" :absolute="true" :offset="[12,setWidth]" max="99"
							:value="unreadcount"></u-badge>
					</view>
					<u-avatar :src="conversational.userPortrait.userHead" shape="square"></u-avatar>
				</view>
				<view slot="label">
					<u--text class="label-text" type="info" size="12" lines="1"
						:text="conversational.lastMessage?conversational.lastMessage.playload.text:''"></u--text>
				</view>
			</u-cell>
			<u-cell v-if="conversational.conversationalType === 'GROUP'"
				:title="conversational.groupPortrait.groupName" clickable :value="lastMessageTime">
				<view slot="icon" class="icon-view">
					<view class="icon-view-badge">
						<u-badge class="icon-badge" :absolute="true" :offset="[12,setWidth]" max="99"
							:value="unreadcount"></u-badge>
					</view>
					<u-avatar :src="conversational.groupPortrait.groupHead" shape="square"></u-avatar>
				</view>
				<view slot="label">
					<u--text class="label-text" type="info" size="12" lines="1"
						:text="conversational.lastMessage?conversational.lastMessage.playload.text:''"></u--text>
				</view>
			</u-cell>
		</u-cell-group>
	</view>
</template>

<script>
	export default {
		name: "Conversational",
		props: {
			conversational: Object,
			unreadcount: Number
		},
		data() {
			return {
				setWidth: 0
			};
		},
		computed: {
			lastMessageTime() {
				//获取系统当前时间
				let timestamp = this.conversational.lastMessageTime;
				if (timestamp.toString().length == 10) timestamp *= 1000;
				var nowDate = new Date();
				var time = new Date(timestamp);
				if (nowDate.getFullYear() === time.getFullYear()) {
					if (nowDate.getMonth() === time.getMonth() && nowDate.getDate() === time.getDate()) {
						return uni.$u.timeFormat(timestamp, 'hh:MM');
					} else {
						return uni.$u.timeFormat(timestamp, 'mm月dd日');
					}
				}
				return uni.$u.timeFormat(timestamp, 'yyyy年mm月dd日');
			}
		},
		mounted() {
			var _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.setWidth = res.screenWidth - uni.$u.getPx('130upx') - uni.$u.getPx('10px');
				}
			})
		}
	}
</script>

<style>
	.icon-view {
		width: 120upx;
		margin-right: 10upx;
	}

	.icon-view-badge {
		width: 35upx;
	}

	.icon-badge {
		z-index: 1000;
	}

	.label-text {
		width: 400upx;
	}
	
	.value-view{
		align-items: flex-end;
	}
</style>
